<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_dataAttributes"></title>
    <script type="text/javascript" include="jquery,bootstrap,jquery-twbsPagination" src="../js/include-web.js"></script>
    <style>
      .attribute-container {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        background: #fff;
        z-index: 1000;
      }
      #pagination-demo {
        float: right;
        margin: 0;
        padding-right: 20px;
        padding-bottom: 20px;
      }
    </style>
  </head>
  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <div class="attribute-container">
      <table class="table table-bordered">
        <thead>
          <tr class="header"></tr>
        </thead>
        <tbody class="tbody"></tbody>
      </table>
      <ul id="pagination-demo" class="pagination-sm"></ul>
    </div>
    <script type="text/javascript" src="../../dist/maplibregl/include-maplibregl.js"></script>
    <script type="text/javascript">
      var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span>";
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var map,
        baseUrl = host + '/iserver/services/map-world/rest/maps/World',
        url = host + '/iserver/services/data-world/rest/data';
      var datasSource = 'World';
      var dataset = 'Countries';
      var pageSize = 8;
      var totalCount;
      var fieldInfos;
      var fieldList = [];
      map = new maplibregl.Map({
        container: 'map', //div id
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [baseUrl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    "tileSize": 256
                }
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "maxzoom": 18
            }]
        },
        center: [120.143, 30.236],
        zoom: 3
    });
    map.addControl(new maplibregl.NavigationControl(), 'top-left');
    map.addControl(new maplibregl.supermap.LogoControl({ link: "https://iclient.supermap.io" }), 'bottom-right');

    map.on('load', function () {
        query();
    });

      function query() {
        var sqlParam1 = new maplibregl.supermap.GetFeaturesBySQLParameters({
          queryParameter: {
            name: dataset + '@' + datasSource
          },
          datasetNames: [datasSource + ':' + dataset]
        });

        new maplibregl.supermap.FeatureService(url).getFeaturesCount(sqlParam1).then(function (serviceResult) {
          totalCount = serviceResult.result.totalCount;
          var totalPages = Math.ceil(totalCount / pageSize);
          $('#pagination-demo').twbsPagination({
            totalPages: totalPages,
            visiblePages: 7,
            first: resources.text_firstPage,
            prev: resources.text_prevPage,
            next: resources.text_nextPage,
            last: resources.text_lastPage,
            onPageClick: function (event, page) {
              $('#page-content').text('Page ' + page);
              var fromIndex = (page - 1) * pageSize;
              var toIndex = page * pageSize - 1;
              getFeature(fromIndex, toIndex);
            }
          });

          new maplibregl.supermap.FeatureService(url).getFeaturesDatasetInfo(sqlParam1).then(function (serviceResult) {
            console.log('serviceResult2', serviceResult);
            fieldInfos = serviceResult.result[0].fieldInfos;
            fieldInfos.forEach((fieldInfo) => {
              var th = document.createElement('th');
              var field = fieldInfo.name;
              fieldList.push(field);
              th.innerHTML = fieldInfo.caption || fieldInfo.name;
              document.querySelector('.header').appendChild(th);
            });
            getFeature(0, pageSize - 1);
          });
        });
      }

      function getFeature(fromIndex, toIndex) {
        var sqlParam = new maplibregl.supermap.GetFeaturesBySQLParameters({
          queryParameter: {
            name: dataset + '@' + datasSource,
            attributeFilter: 'SMID > 0'
          },
          fromIndex,
          toIndex,
          datasetNames: [datasSource + ':' + dataset],
          returnFeaturesOnly: true
        });
        new maplibregl.supermap.FeatureService(url).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
          var tbody = document.querySelector('.tbody');
          tbody.innerHTML = '';
          serviceResult.result.features.features.forEach((feature) => {
            var tr = document.createElement('tr');
            var props = feature.properties;
            fieldList.forEach((field) => {
              var td = document.createElement('td');
              td.innerHTML = props[field.toUpperCase()];
              tr.appendChild(td);
            });
            tbody.appendChild(tr);
          });
        });
      }
    </script>
  </body>
</html>
